<template>
    <div class="el-content__sizer">
        <div class="el-content__sizer__item" v-for="(item1, index1) in props.sizerdata ? props.sizerdata : sizer "
            :key="index1">
            <b>{{ item1.name }}：</b>
            <div class="el-content__sizer__item__options">
                <span v-for="(item, index) in item1.options " :key="index">
                    <a href="#" :class="{ focus: uoid.includes(index) && index == uoid[index1] }"
                        @click="getsizeid(index1, index)">{{
                            item
                        }}</a>
                </span>
            </div>
        </div>
        <div class="el-content__sizer__search">
            <b>{{ props.itemname ? props.itemname : "某某" }}搜索：</b>
            <div class="el-content__sizer__search__box">
                <input type="text" v-model="keyword" placeholder="搜索" @keyup.enter="search">
                <el-icon>
                    <Search @click="search" />
                </el-icon>
            </div>

        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
const props = defineProps(['sizerdata', 'itemname']);
const emit = defineEmits(['pushkeyword', 'pushuoid'])

const sizer = reactive([
    {
        id: 0,
        name: "xx类别",
        options: [
            "全部", "选项一", "选项二", "选项三"
        ]
    },

])

//用来储存点击后需要添加样式和筛选数据的id
const uoid = ref([])
uoid.value[0] = 0

// 点击事件
const getsizeid = (sizesid, sizeoid) => {
    uoid.value[sizesid] = sizeoid
    emit('pushuoid', uoid.value)
}


// 主动暴露childMethod方法
defineExpose({ getsizeid })
//搜索比赛(对全部的赛事进行筛选)
const keyword = ref("")
const search = () => {
    emit('pushkeyword', keyword)
}

</script>
<style scoped lang='scss'>
.el-content__sizer {
    width: 1060px;
    border: 1px solid rgb(235, 234, 234);
    box-shadow: 3px 3px 8px rgb(170, 170, 170);
    border-radius: 10px;
    padding: 10px;

    .el-content__sizer__item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .el-content__sizer__item__options {

            a {
                margin: 20px;
                font-size: 14px;
                text-decoration: none;
                color: black;
                padding: 4px 10px;
            }

            .focus,
            span>&:active,
            a:hover {
                background-image: linear-gradient(to top, #fed6e3 0%, #b2dedc 100%, );
                border-radius: 13px;
            }
        }
    }

    .el-content__sizer__search {
        display: flex;
        align-items: center;

        .el-content__sizer__search__box {
            height: 30px;
            border: 1px solid #ccc;
            margin-left: 20px;
            display: flex;
            align-items: center;
            border-radius: 15px;
            padding: 0 10px;

            input {
                height: 25px;
                border: none;
                outline: none;
                background-color: transparent;
            }

            .el-icon {
                margin-left: 5px;
                cursor: pointer;

                &:hover {
                    color: #42b983;
                }
            }

        }

    }
}
</style>